<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯视频</title>
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="../css/common.css">
  <!-- 首页对应的样式 -->
  <link rel="stylesheet" href="../css/index.css">
  <!-- 首页字体图标的样式 -->
  <link rel="stylesheet" href="../fonts/index/iconfont.css">
</head>

<body>
  <div class="tencent">

    <!-- 顶部start -->
    <div class="app-top">
      <!-- logo -->
      <div class="logo">
        <h1>
          <a href="index.html" title="腾讯视频">腾讯视频</a>
        </h1>
      </div>
      <!-- 搜索框 -->
      <div class="search">
        <input type="text" placeholder="小日子" class="search-input">
        <i class="iconfont icon-sousuo"></i>
        <i class="iconfont icon-resoubang_0912"></i>
        <div class="search-button">
          <i class="iconfont icon-sousuo"></i>
          <span>全网搜</span>
        </div>
        <div class="smartbox"></div>
      </div>
      <!-- 用户应用 -->
      <div class="user-nav">
        <div class="vip">
          <a href="#"><i class="iconfont icon-gonggong-VIP" title="VIP频道"></i></a>
        </div>
        <div class="game">
          <a href="#"><i class="iconfont icon-youxiji" title="游戏"></i></a>
        </div>
        <div class="record">
          <a href="#"><i class="iconfont icon-lishijilu"></i></a>
        </div>
        <div class="createcenter">
          <a href="#"><i class="iconfont icon-record-video" title="创作中心"></i></a>
        </div>
        <div class="version">
          <a href="#"><i class="iconfont icon-diannao"></i></a>
        </div>
        <div class="user">
          <a href="#">
            <img src="../images/user-box/portrait.jpg" alt="">
          </a>
        </div>
        <div class="triangle"></div>
        <div class="user-detail">
          <div class="user-detail-top">
            <span>登录之后可以</span>
          </div>
          <ul class="user-detail-middle">
            <li><img src="../images/user-box/img01.jpg" alt=""><span title="同步多端观看记录">同步多端观看记录</span></li>
            <li><img src="../images/user-box/img02.jpg" alt=""><span title="参与互动讨论">参与互动讨论</span></li>
            <li><img src="../images/user-box/img03.jpg" alt=""><span title="观看更个性化内容">观看更个性化内容</span></li>
            <li><img src="../images/user-box/img04.jpg" alt=""><span title="领取专属游戏礼包">领取专属游戏礼包</span></li>
          </ul>
          <div class="user-detail-bottom">
            <span>立即登录</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 左侧导航栏 -->
    <div class="nav-left">
      <ul>
        <li class="nav-left-items">
          <i class="iconfont icon-shoucang"></i><span>首页</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-bofang1"></i><span>中视频</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-dianshi"></i><span>电视剧</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-dianying"></i><span>电影</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-zongyi"></i><span>综艺</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-dongman"></i><span>动漫</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-shaoer"></i><span>少儿</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-airudiantubiaohuizhi-zhuanqu_tiyushijie"></i><span>体育</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-dianshiji-"></i><span>纪录片</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-bofang1"></i><span>短剧</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-koulan"></i><span>NBA</span>
        </li>
        <li class="nav-left-items">
          <i class="iconfont icon-gonggong-VIP"></i><span>VIP会员</span>
        </li>
      </ul>
    </div>

    <!-- 背景板 -->
    <div class="background">
      <!-- 引言 -->
      <div class="introduce">
        <div class="introduce-img">
          <img src="../images/background-box/01/introduce.png" alt="">
        </div>
        <span class="introduce-type">陈晓 童瑶 婚姻生活</span>
        <span class="introduce-text">"陈晓童瑶首搭守护小日子"</span>
        <div class="introduce-bottom">
          <div class="button">
            <span>播放正片</span>
          </div>
          <div class="voice">
            <i class="iconfont icon-jingyin"></i>
          </div>
        </div>
      </div>
      <!-- 其他作品 -->
      <div class="recommendation">
        <div class="prev"></div>
        <ul>
          <li class="work">
            <a href="detail.html" data-id="0">
              <img src="../images/recommendation/pic01.jpg" alt="">
              <span>小日子</span>
            </a>
          </li>
          <li class="work">
            <a href="#" data-id="1">
              <img src="../images/recommendation/pic02.jpg" alt="">
              <span>欢乐颂5</span>
            </a>
          </li>
          <li class="work">
            <a href="#" data-id="2">
              <img src="../images/recommendation/pic03.jpg" alt="">
              <span>哈哈哈哈哈 第四季</span>
            </a>
          </li>
          <li class="work">
            <a href="#" data-id="3">
              <img src="../images/recommendation/pic04.jpg" alt="">
              <span>神印王座</span>
            </a>
          </li>
          <li class="work">
            <a href="#" data-id="4">
              <img src="../images/recommendation/pic05.jpg" alt="">
              <span>与风行</span>
            </a>
          </li>
        </ul>
        <div class="next"></div>
      </div>
      <!-- 底部阴影 -->
      <div class="bottom-shadow"></div>
      <!-- 整体阴影 -->
      <div class="background-shadow">
        <!-- 登录框 -->
        <div class="box">
          <header class="box-header">
            <i class="iconfont icon-xiangzuolajiantou"></i>
            <span>QQ账号登录</span>
            <i class="iconfont icon-shanchu"></i>
          </header>
          <h3>登录后高清播放更流畅</h3>
          <div class="box-body">
            <article>
              <h4>密码登录</h4>
              <p>推荐使用<a href="#">快捷登录</a>,防止盗号</p>
              <input type="text" placeholder="支持QQ号/邮箱/手机号登录" class="username">
              <input type="password" placeholder="请输入密码" class="password">
              <button class="login">登录</button>
              <div class="function">
                <a href="#">找回密码</a>
                <a href="#" class="changeMode">注册账号</a>
                <a href="#">意见反馈</a>
              </div>
            </article>
            <aside>
              <ul>
                <li>
                  <input type="checkbox" id="all" checked>
                  <label for="all">全选 <a href="index.html">腾讯视频</a> 将获取以下权限:</label>
                </li>
                <li>
                  <input type="checkbox" id="information" checked disabled>
                  <label for="information">使用你的QQ头像、昵称信息</label>
                </li>
              </ul>
              <p>授权即同意<a href="#">服务协议</a>和<a href="#">QQ隐私保护指引</a></p>
            </aside>
          </div>
        </div>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="body">
      <div class="w">
        <!-- 头部 -->
        <div class="text-hd">
          <div class="hd-type">
            <h4>重磅热播</h4>
            <ul>
              <li>l<a href="#" class="active" data-id="0">全部</a></li>
              <li><a href="#" data-id="1">电视剧</a></li>
              <li><a href="#" data-id="2">综艺</a></li>
              <li><a href="#" data-id="3">电影</a></li>
              <li><a href="#" data-id="4">动漫</a></li>
              <li><a href="#" data-id="5">少儿</a></li>
              <li><a href="#" data-id="6">纪录片</a></li>
            </ul>
          </div>
          <div class="change">
            <i class="iconfont icon-weibiaoti--"></i>
            <span>换一换</span>
          </div>
        </div>
        <!-- 主体 -->
        <div class="text-bd">
          <!-- <div class="bd-item" id="${id}">
            <div class="bd-element">
              <div class="bd-img">
                <img src="${cover}" alt="">
                <span class="bd-type">独播</span><span class="bd-episode">${mark}分</span>
              </div>
              <video class="hidden-video" src="" autoplay loop muted></video>
            </div>
            <div class="bd-text">
              <div class="bd-intro">
                <span class="work-title">${name}</span>
                <span class="work-text">"${brief}"</span>
              </div>
              <div class="video-intro">
                <span class="work-title">${name}</span>
                <span class="work-text">${tag}</span>
                <span class="work-text">"${brief}"</span>
                <div class="shoucang">
                  <i class="iconfont icon-menu-left"></i>
                  <span class="subscribe">追</span>
                  <span class="subscribe-active">已追</span>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
  <script src="../js/index.js"></script>
</body>

</html>